

<template>
  <view class="work-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-content">
        <uni-icons type="chatbox-ellipses" size="40" color="#007AFF" class="robot-icon"></uni-icons>
        <text class="page-title">智能故障诊断助手</text>
      </view>
    </view>
    
    <!-- 聊天界面 -->
    <view class="chat-container">
      <!-- 聊天消息区域 -->
      <view class="chat-messages" id="chatMessages">
        <view v-for="message in messages" :key="message.id" :class="['message-wrapper', message.type]">
          <view :class="['message-bubble', message.type]">
            <text class="message-text">{{message.content}}</text>
          </view>
        </view>
      </view>
      
      <!-- 快速操作按钮 -->
      <view class="quick-actions">
        <button class="action-btn" @click="pingTest">
          <uni-icons type="success" size="20" color="#4CD964"></uni-icons>
          <text>ping测评</text>
        </button>
        <button class="action-btn" @click="connectivityCheck">
          <uni-icons type="wifi" size="20" color="#007AFF"></uni-icons>
          <text>连通性检查</text>
        </button>
        <button class="action-btn" @click="websiteAccess">
          <uni-icons type="earth" size="20" color="#FF9500"></uni-icons>
          <text>网站可访问</text>
        </button>
      </view>
      
      <!-- 输入区域 -->
      <view class="chat-input-area">
        <input 
          class="chat-input" 
          v-model="userInput" 
          placeholder="请输入您的问题..." 
          confirm-type="send"
          @confirm="sendMessage"
        />
        <button class="send-btn" @click="sendMessage">发送</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 工作台数据
        userInput: '',
        messages: [
          {
            id: '1',
            type: 'system',
            content: '您好！我是AI智能故障诊断助手，请问有什么可以帮助您的？'
          }
        ]
      }
    },
    onLoad() {
      // 加载工作台数据
      this.loadWorkbenchData()
    },
    methods: {
      // 加载智能体数据
      loadWorkbenchData() {
        // 这里可以加载智能体所需的数据
        console.log('加载智能体数据')
      },
      
      // 功能模块点击事件
      changeGrid(e) {
        const index = e.detail.index
        const functions = ['个人中心', '日程安排', '消息通知', '文件管理']
        uni.showToast({
          title: `${functions[index]} 功能开发中`,
          icon: 'none'
        })
      },
      
      // 发送消息
      sendMessage() {
        if (!this.userInput.trim()) {
          return
        }
        
        // 添加用户消息
        const userMessage = {
          id: Date.now().toString(),
          type: 'user',
          content: this.userInput.trim()
        }
        this.messages.push(userMessage)
        
        // 清空输入框
        this.userInput = ''
        
        // 模拟AI回复
        setTimeout(() => {
          const aiMessage = {
            id: (Date.now() + 1).toString(),
            type: 'system',
            content: this.generateReply(userMessage.content)
          }
          this.messages.push(aiMessage)
          this.$nextTick(() => {
            this.scrollToBottom()
          })
        }, 800)
        
        this.$nextTick(() => {
          this.scrollToBottom()
        })
      },
      
      // 生成AI回复
      generateReply(userContent) {
        const replies = [
          '感谢您的提问！根据您描述的情况，我建议您检查网络连接状态。',
          '这个问题可能是由于系统配置不正确导致的，请尝试重启设备后再次尝试。',
          '我已收到您的问题，正在分析解决方案，请稍候...',
          '根据常见故障模式，您可以尝试清除缓存或者重置网络设置。'
        ]
        return replies[Math.floor(Math.random() * replies.length)]
      },
      
      // 滚动到底部
      scrollToBottom() {
        const chatMessages = document.getElementById('chatMessages')
        if (chatMessages) {
          chatMessages.scrollTop = chatMessages.scrollHeight
        }
      },
      
      // 快速操作方法
      pingTest() {
        this.sendQuickActionMessage('执行ping测评中，请稍候...')
      },
      
      connectivityCheck() {
        this.sendQuickActionMessage('正在进行网络连通性检查，请稍候...')
      },
      
      websiteAccess() {
        this.sendQuickActionMessage('正在检查网站可访问性，请稍候...')
      },
      
      // 发送快速操作消息
      sendQuickActionMessage(actionText) {
        const actionMessage = {
          id: Date.now().toString(),
          type: 'user',
          content: actionText
        }
        this.messages.push(actionMessage)
        
        // 模拟操作结果
        setTimeout(() => {
          const resultMessage = {
            id: (Date.now() + 1).toString(),
            type: 'system',
            content: `操作已完成：${actionText}\n测试结果：网络连接正常，响应时间良好。`
          }
          this.messages.push(resultMessage)
          this.$nextTick(() => {
            this.scrollToBottom()
          })
        }, 1500)
        
        this.$nextTick(() => {
          this.scrollToBottom()
        })
      }
    }
  }
</script>

<style scoped>
    .work-container {
      padding: 20rpx;
      box-sizing: border-box;
    }
    
    .page-header {
      text-align: center;
      padding: 20rpx 0;
      margin-bottom: 20rpx;
    }
    
    .header-content {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .robot-icon {
      margin-right: 15rpx;
    }
    
    .page-title {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
    }
  
  .welcome-section {
    background-color: #f5f5f5;
    border-radius: 12rpx;
    padding: 40rpx;
    text-align: center;
    margin-bottom: 30rpx;
  }
  
  .welcome-text {
    font-size: 40rpx;
    color: #333;
    font-weight: bold;
    display: block;
    text-align: center;
  }
  
  .grid-body {
    margin: 20rpx 0 30rpx 0;
  }
  
  .grid-item-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20rpx 0;
  }
  
  .grid-item-box .text {
    font-size: 26rpx;
    color: #333;
    margin-top: 16rpx;
  }
  
  /* 智能诊断聊天界面样式 */
  .chat-container {
    background-color: #f8f8f8;
    border-radius: 12rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  /* 聊天消息区域 */
  .chat-messages {
    height: 50vh;
    padding: 30rpx;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  
  /* 消息气泡 */
  .message-bubble {
    max-width: 80%;
    padding: 20rpx 30rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    word-wrap: break-word;
  }
  
  /* 系统消息 */
  .message-wrapper.system .message-bubble {
    background-color: #e1f0ff;
    align-self: flex-start;
    border-bottom-left-radius: 8rpx;
  }
  
  /* 快捷操作按钮区域 */
  .quick-actions {
    padding: 20rpx 30rpx;
    background-color: #fff;
    border-top: 1rpx solid #eee;
    border-bottom: 1rpx solid #eee;
    display: flex;
    justify-content: space-between;
  }
  
  /* 快捷操作按钮 */
  .action-btn {
    flex: 1;
    margin: 0 10rpx;
    padding: 15rpx 0;
    border: none;
    background-color: #f0f0f0;
    border-radius: 60rpx;
    font-size: 26rpx;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .action-btn:active {
    background-color: #e0e0e0;
  }
  
  /* 输入区域 */
  .chat-input-area {
    padding: 20rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
  }
  
  /* 输入框 */
  .chat-input {
    flex: 1;
    height: 80rpx;
    background-color: #f5f5f5;
    border-radius: 40rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    border: none;
    outline: none;
  }
  
  /* 发送按钮 */
  .send-btn {
    margin-left: 20rpx;
    width: 120rpx;
    height: 80rpx;
    background-color: #007AFF;
    border-radius: 40rpx;
    color: white;
    font-size: 28rpx;
  }
</style>
